<template>
	<div class="route-content" :style="{padding:!read?'30rpx':'0'}">
		<div class="flex desc between" v-if="!read">
			选择展示的车辆路线 (已选:{{checkedCount()}})

			<view class="flex">
				<div class="refresh flex" @click="getVehicle()">
					<image src="/static/card/refresh.png" mode="widthFix" style="width: 30rpx;margin-right: 6rpx;">
					</image>
					刷新
				</div>
				<div class="transport-setting" @click="go('/pages/tabbar/order/web')">车辆库管理</div>
			</view>
		</div>
		<scroll-view scroll-y="true" style="flex:1;overflow: auto;">
			<template v-for="(item,index) in listData">
				<div class="vehicle-content" v-if="!read||item.transport_list.filter(route=>route.checked).length!=0"
					:class="{read:read,itemChecked:itemIsChecked(item)&&!read}">

					<!-- 车辆选择器暂时不用 -->
					<!--<div style="width: 50rpx;padding-top: 25rpx;padding-left: 15rpx;">
						<div @click="checkItem(item,index)" class="checkbox" :class="{checked:item.checked}"></div>
					</div> -->

					<div style="width: 100%;">
						<vehicleItem v-show="!onlyRoute" :item="item" />

						<div class="route-list">
							<template v-for="route in item.transport_list">

								<div class="item" v-if="!read||(read&&route.checked)" @click="checkItem(route,index)">

									<div v-if="!read" class="center route-icon" style="width: 150rpx;">
										<div class="checkbox" :class="{checked:route.checked}">
										</div>
									</div>
									<!-- 路线图标 -->
									<div v-else class="center route-icon">
										<div class="icon">
											<image src="/static/card/route.png"
												style="width: 30rpx;height:25rpx;transform: rotateZ(90deg);">
											</image>
										</div>
									</div>

									<div class="route-info">
										<div class="route" style="border-bottom: 1rpx solid #e9e9e9;">
											{{route.departure_city.mergename}}
										</div>
										<div class="route">
											{{route.reach_city.mergename}}
										</div>
									</div>
									<div class="day">
										<div class="value">{{route.speed}}</div>
										<div class="label2">天</div>
									</div>
									<div class="price">
										<div class="value">{{route.price||$t("未设置")}}</div>
										<div class="label2">元</div>
									</div>
								</div>
							</template>


						</div>

					</div>
				</div>
			</template>
			<div style="height: 50rpx;"></div>
		</scroll-view>
		<div class="submit" v-if="!read" @click="updateToParent();close()">确认选择</div>
	</div>
</template>

<script>
	import vehicleItem from "./vehicleItem.vue"
	export default {
		components: {
			vehicleItem
		},
		props: ["itemValue", "u_id", "read", "onlyRoute", "vehicleSelectIsShow"],
		data() {
			return {
				lang: uni.getStorageSync("lang"),
				listData: []
			}
		},
		created() {
			this.getVehicle();
		},
		watch: {
			itemValue() {
				this.init();
			}
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})
			},
			checkedCount() {
				if (this.listData) {
					let count = 0;
					this.listData.forEach(item => {
						if (item.transport_list) {
							item.transport_list.forEach(item => {
								if (item.checked) count++
							})
						}
					})
					return count
				} else {
					return 0;
				}
			},
			getVehicle() {
				this.listData = [];
				this.$u.api.release.transportVehicle({
					page: 1,
					limit: 99999,
					status: "",
					u_id: this.u_id
				}).then(r => {
					this.listData = r.list || [];
					this.init();
				})
			},
			init() {
				this.listData.forEach(item => {
					this.$set(item, "checked", false)
					item.transport_list.forEach(item => {
						this.$set(item, "checked", false)
					})
				})

				if (this.itemValue) {
					const itemValueObj = JSON.parse(this.itemValue)
					this.listData.forEach(item => {
						item.transport_list.forEach((route, index) => {
							if (itemValueObj[item.id] && itemValueObj[item.id].indexOf(index) > -1) {
								route.checked = true
							}
						})
					})
				}
				this.checkedCount()
			},
			checkItem(item, index) {
				if (this.read) return;
				item.checked = !item.checked;

			},
			updateToParent() {
				let checkedArr = {};
				this.listData.forEach(item => {
					item.transport_list.forEach((route, index) => {
						if (route.checked) {
							if (!checkedArr[item.id]) checkedArr[item.id] = []
							checkedArr[item.id].push(index)
						}
					})
				})

				this.$emit("change", JSON.stringify(checkedArr))
			},
			close() {
				this.$emit("update:vehicleSelectIsShow", false)
			},
			itemIsChecked(item) {
				if (!item.transport_list) return false
				return item.transport_list.filter(item => item.checked).length > 0
			}
		}
	}
</script>

<style lang="less">
	.desc {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}

	.itemChecked {
		border-color: #06c36e !important;
		box-sizing: border-box;
	}

	.route-icon {
		background-color: #eff0f5;
		border-radius: 16rpx 0 0 16rpx;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checked {
		border-color: #06C36E !important;
		border-width: 8rpx !important;
	}

	.checkbox {
		width: 35rpx;
		height: 35rpx;
		background-color: #fff;
		border: 1rpx solid #999999;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.route-list {
		.item:last-child {
			margin-bottom: 0;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			margin-bottom: 16rpx;


			.route-info {
				width: 100%;
				font-size: 22rpx;
				color: #1d1d1d;

				.route {
					background-color: #F6F7FB;
					padding: 15rpx 20rpx;
					font-size: 22rpx;
					color: #1d1d1d;
					line-height: 35rpx;
				}
			}

			.icon {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.day {
				width: 130rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				flex-direction: column;
				flex-shrink: 0;
				background-color: #eff0f5;
				border-right: 1rpx solid rgb(233, 233, 233);

				.value {
					font-size: 26rpx;
					font-weight: bold;
				}
			}

			.label2 {
				color: #999;
				font-size: 22rpx;
			}

			.price {
				width: 130rpx;
				border-radius: 0 16rpx 16rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				flex-direction: column;
				flex-shrink: 0;
				background-color: #eff0f5;

				.value {
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
	}



	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.vehicle-content {
		display: flex;
		justify-content: space-between;
		border: 1px solid #ddd;
		padding: 16rpx;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		margin-top: 24rpx;
	}

	.read {
		border: 0 !important;
		padding: 0 !important;
	}

	.route-content {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.transport-setting {
		background-image: linear-gradient(90deg, #2B61EB 0%, #4BADFD 100%);
		color: #fff;
		padding: 10rpx 16rpx;
		border-radius: 30rpx;
		margin-left: 16rpx;
		font-size: 24rpx;
	}

	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		left: 100%;
		font-size: 30rpx;
		font-weight: 400;
		height: 112rpx;
		background: linear-gradient(90deg, #2B61EB 0%, #4BADFD 100%);
	}

	.refresh {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-weight: normal;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;

		&:active {
			background-color: #f5f5f5;
		}
	}
</style>